<template>
    <div class="special-apply same-change-oldstyle">
        <div class="special-top">
            <div class="saem-seat-box">
                <div class="saem-seat-left">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item>当前位置：</el-breadcrumb-item>
                        <el-breadcrumb-item>水卡管理</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{path:'/applylist'}">特殊水卡</el-breadcrumb-item>
                        <el-breadcrumb-item>特殊水卡修改</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="saem-seat-right">
                    <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
                    <button class="same-search-btns" @click="returnBack">返回</button>
                </div>
            </div>
        </div>
        <div class="gray-line"></div>
        <div class="special-wrapper">
            <div class="special-title">
                <el-icon class="el-icon-postcard"></el-icon>
                <span>用户信息</span>
            </div>
            <div class="row-line">
                <div class="row-cell">
                    <span class="row-label">姓名</span>
                    <el-input class="row-ipt" v-model="full_name" size="medium" placeholder="请输入姓名"></el-input>
                    <span class="hintStr">*</span>
                </div>
                <div class="row-cell">
                    <span class="row-label">手机号码</span>
                    <el-input class="row-ipt" v-model="tel" size="medium" maxlength="11" placeholder="请输入手机号码">
                    </el-input>
                    <span class="hintStr">*</span>
                </div>
            </div>

            <div class="row-line">
                <!-- <div class="row-cell">
                    <span class="row-label">性别</span>
                    <el-radio-group v-model="gender" class="row-ipt">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="2">女</el-radio>
                    </el-radio-group>
                </div> -->
                <div class="row-cell">
                    <span class="row-label">园区名称</span>
                    <el-select @change="chooseVillage" size="medium" class="row-ipt" v-model="villageIndex"
                        placeholder="请选择园区名称">
                        <el-option v-for="(item,index) in villageList" :label="item.village_name" :value="index"
                            :key="item.id">
                        </el-option>
                    </el-select>
                    <span class="hintStr">*</span>
                </div>
            </div>

            <div class="row-line" v-if="villageIndex!==''">
                <div class="row-cell">
                    <span class="row-label">地址信息</span>
                    <div class="disable-cell max-width-300 over-hidden">
                        {{villageList[villageIndex].province_name}}-{{villageList[villageIndex].city_name}}-{{villageList[villageIndex].area_name}}
                    </div>
                    <span class="deliver-line">-</span>
                    <div class="disable-cell max-width-300 over-hidden">{{villageList[villageIndex].address}}</div>
                    <span class="deliver-line">-</span>
                    <el-input size="medium" placeholder="请输入详细地址" v-model="addressTwo"></el-input>
                </div>
            </div>

            <div class="row-line">
                <div class="row-cell">
                    <span class="row-label">证件类型</span>
                    <el-select v-model="certificate" size="medium" class="row-ipt" placeholder="请选择证件类型">
                        <el-option v-for="item in certificateType" :value="item.id" :label="item.label"
                            :key="item.label">
                        </el-option>
                    </el-select>
                    <span class="hintStr">*</span>
                </div>
                <div class="row-cell">
                    <span class="row-label">证件号码</span>
                    <el-input v-model="certificate_number" class="row-ipt" size="medium" placeholder="请输入证件号码">
                    </el-input>
                    <span class="hintStr">*</span>
                </div>
            </div>

            <div class="row-line">
                <div class="row-cell  upload-cell">
                    <span class="row-label">证件类型</span>
                    <el-upload accept="image/*" :file-list="uploadImg" :on-preview="handlePictureCardPreview"
                        :before-upload="beforeUpload" :limit="maxUploadNumber" :action="uploadUrl"
                        :on-error="uploadError" :on-remove="handleRemove" :on-exceed="uploadExceed"
                        :on-progress="uploadProgress" :on-success="uploadSuccess" list-type="picture-card">
                        <i slot="default" class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                    <span class="hintStr">*</span>
                </div>
            </div>

            <div class="special-title">
                <el-icon class="el-icon-bank-card"></el-icon>
                <span>水卡信息</span>
            </div>

            <div class="row-line">
                <div class="row-cell">
                    <span class="row-label">水卡类型</span>
                    <el-select size="medium" v-model="cardType" class="row-ipt" placeholder="请选择水卡类型">
                        <el-option filterable v-for="item in cardSpecialType" :value="item.id" :label="item.label"
                            :key="item.label">
                        </el-option>
                    </el-select>
                    <span class="hintStr">*</span>
                </div>
                <div class="row-cell">
                    <span class="row-label">水卡卡号</span>
                    <el-input class="row-ipt" v-model="card" size="medium" placeholder="请输入水卡卡号"></el-input>
                    <span class="hintStr">*</span>
                </div>
            </div>
            <div class="row-line">
                <div class="row-cell">
                <span class="row-label">审核类型</span>
                <el-select v-model="audit_type" size="medium" class="row-ipt" placeholder="请选择审核类型">
                    <el-option v-for="item in auditTypes" :value="item.id" :label="item.label" :key="item.label">
                    </el-option>
                </el-select>
                <span class="hintStr">*</span>
                </div>
            </div>


            <div class="row-line">
				<div class="row-cell">
					<span class="row-label">充值金额</span>
					<el-radio-group v-model="recharge" size="medium">
						<el-radio class="mr-10" :key="item" v-for="item in rechargeConfig" :label="item" border>{{item}}元</el-radio>
					</el-radio-group>
                    <span class="hintStr">*</span>
				</div>
			</div>

			<div class="row-line">
				<div class="row-cell">
					<span class="row-label">水卡押金</span>
					<el-radio-group v-model="deposit" size="medium">
						<el-radio  class="mr-10":key="item" v-for="item in depositConfig" :label="item" border>{{item}}元</el-radio>
					</el-radio-group>
                    <span class="hintStr">*</span>
				</div>
			</div>
            <div class="row-line submit">
                <el-button size="medium" type="primary" @click="editSpecialCard" class="submit-btn">修 改</el-button>
            </div>
        </div>
    </div>
</template>
<script>
    const certificateType = [{ //证件类型
        id: '1',
        label: '身份证'
    }, {
        id: '2',
        label: '军官证'
    }, {
        id: '3',
        label: '户口本'
    }, {
        id: '4',
        label: '出身证明'
    }];
    const auditTypes = [{ //审查类型
		id: '1',
		label: '年审'
	}, {
		id: '2',
		label: '月审'
	}, {
        id: '3',
        label: '不定期'
    }];
    export default {
        name: "Sordinaryapply",
        data() {
            return {
                maxUploadNumber: 2,
                uploadUrl: process.env.API_ROOT + "Common/Common/upload",
                cardSpecialType: [],//特殊水卡类型
                cardType: '',//特殊水卡的选中值
                full_name: "",//姓名
                tel: "",  //电话
                gender: "",//性别
                villageList: [],
                villageIndex: "", //选择的园区Index
                certificateType,
                certificate: '',//选择证件
                certificate_number: "",//证件号码
                addressTwo: '',
                card: "",
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                uploadImg: [],
                rechargeConfig: [],//充值金额配置
                recharge: "",
                depositConfig: [],
                deposit: '',
                auditTypes,//审核类型
			    audit_type: '',//选中的审查类型
            }
        },

        mounted() {
            Promise.all(
                [this.getVillageList(), this.getSpecialCardType(), this.getRechargeConfig(),
                this.getDepositConfig()]
            ).then(([villageList, cardSpecialType, rechargeConfig, depositConfig]) => {
                this.villageList = villageList;
                this.cardSpecialType = cardSpecialType;
                this.rechargeConfig = rechargeConfig;
                this.depositConfig = depositConfig;
                this.getCardInfo();
            }).catch(err => {
                this.$message.error(err)
            });

        },

        inject: ['reload'],
        methods: {
            RefreshFun() {
                // 调用reload方法，刷新整个页面
                this.reload()
            },
            //返回
            returnBack() {
                this.$router.back(-1);
            },

            //获取水卡信息
            getCardInfo() {
                this.$post({
                    url: 'Partner/WaterCard/getWaterCardAudit',
                    data: {
                        id: this.$route.query.id
                    },
                    success: res => {
                        if (res.code > 0) {
                            let card = res.data;
                            this.full_name = card.full_name;
                            this.gender = card.sex_number;
                            this.tel = card.tel;
                            this.audit_type=card.audit_type;
                            let villageIndex = this.villageList.findIndex((item, index) => {
                                return item.id == card.village_id;
                            })

                            this.villageIndex = ~villageIndex ? villageIndex : '';
                            this.addressTwo = card.address_two;
                            this.certificate = card.paper_type_number;
                            this.certificate_number = card.IDcard;
                            let uploadImg = [];
                            card.audit_data.forEach(item => {
                                let arr = item.split("/");
                                let url = arr[arr.length - 1];
                                if (url) {
                                    uploadImg.push({
                                        name: "",
                                        url: item,
                                        short_url: url,
                                    });
                                }
                            })
                            this.uploadImg = uploadImg;
                            this.cardType = parseInt(card.card_type_number);
                            this.card = card.card_number;
                            this.recharge=parseInt(card.recharge_money);
                            this.deposit=parseInt(card.card_deposit)

                        } else {
                            this.$message.error(res.message)
                        }
                    },
                    error: e => { this.$message.error("网络错误"); }
                })
            },

            //修改特殊水卡信息
            editSpecialCard() {
                if (this.full_name == "") {
                    this.$message.error("请输入姓名");
                    return false;
                }
                let tel = this.tel;
                if (this.tel == "") {
                    this.$message.error("请输入手机号码");
                    return false;
                }
                if (this.villageIndex === "") {
                    this.$message.error("请选择园区");
                    return false;
                }
                if (this.certificate === "") {
                    this.$message.error("请选择证件类型");
                    return false;
                }
                if (this.certificate_number == "") {
                    this.$message.error("请输入证件号码");
                    return false;
                }
                if (this.audit_type === "") {
					this.$message.error("请选择审核类型");
					return false;
				}
                if (this.uploadImg.length == 0) {
                    this.$message.error("请上传证件照片");
                    return false;
                }
                if (this.cardType === "") {
                    this.$message.error("请选择水卡类型");
                    return false;
                }
                if (this.card == "") {
                    this.$message.error("请填写水卡号");
                    return false;
                }
                const audit_data = [];
                this.uploadImg.forEach(item => {
                    audit_data.push(item.short_url);
                })
                const village = this.villageList[this.villageIndex];
                this.$post({
                    url: "Partner/WaterCard/editSpecialApplication",
                    data: {
                        id: this.$route.query.id,
                        full_name: this.full_name,
                        tel: this.tel,
                        card_class: 2,
                        card_type: this.cardType,
                        paper_type: this.certificate,
                        IDcard: this.certificate_number,
                        audit_type: this.audit_type,
                        province: village.province,
                        city: village.city,
                        sn: this.card,
                        area: village.area,
                        address: village.address,
                        address_two: this.addressTwo,
                        village_name: village.village_name,
                        audit_data: audit_data,
                        card_price:this.recharge,
                        deposit:this.deposit,
                    }, success: res => {
                        if (res.code > 0) {
                            this.$message.success(res.message);
                            setTimeout(() => {
                                this.$router.push({ path: '/applylist' })
                            }, 1500)
                        } else {
                            this.$message.error(res.message || "网络错误");
                        }
                    }, error: e => {
                        this.$message.error("网络错误");
                    }
                })

            },

            chooseVillage(val) {
                this.villageIndex = val;
                this.addressTwo = "";
            },

            //获取特殊水卡类型
            getSpecialCardType() {
                return new Promise((resolve, reject) => {
                    this.$post({
                        url: "Partner/WaterCard/getCarType",
                        data: {
                            type: 2,
                            is_apply: 1
                        },
                        success: res => {
                            if (res.code > 0) {
                                resolve(res.data);
                            } else {
                                reject(res.message);
                            }
                        }, error: e => {
                            reject("网络错误")
                        }
                    })
                })
            },

            //获取园区列表
            getVillageList() {
                return new Promise((resolve, reject) => {
                    this.$post({
                        url: "Partner/WaterCard/getPartnerVillage",
                        success: res => {
                            if (res.code > 0) {
                                resolve(res.data)
                            } else {
                                reject(res.message)
                            }
                        }, error: e => {
                            reject("网络错误")
                        }
                    })
                })
            },
            //获取充值金额配置
            getRechargeConfig() {
                return new Promise((resolve, reject) => {
                    this.$post({
                        url: 'Partner/WaterCard/getSpecialCardRechargeConfig',
                        success: (res) => {
                            if (res.code > 0) {
                                resolve(res.data)
                            } else {
                                reject(res.message);
                            }
                        }, error: e => {
                            reject("网络错误");
                        }
                    })
                })

            },

            //获取押金配置
            getDepositConfig() {
                return new Promise((resolve, reject) => {
                    this.$post({
                        url: "Common/Common/cardDeposit",
                        success: res => {
                            if (res.code > 0) {
                                resolve(res.data)
                            } else {
                                reject(res.message);
                            }
                        }, error: e => {
                            reject("网络错误");
                        }
                    })
                })

            },






            uploadExceed() {
                this.$message.error(`最多只能上传${this.maxUploadNumber}张图片`);
            },


            beforeUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过2MB!');
                }
                return isLt2M;
            },



            uploadProgress() {
                this.loading = this.$loading({
                    lock: true,
                    text: '图片上传中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            },

            uploadError() {
                this.loading.close();
            },


            uploadSuccess(e, file, fileList) {
                this.loading.close();
                if (e.code === 1000) {
                    this.uploadImg.push(
                        {
                            name: "",
                            url: e.data.all_url,
                            short_url: e.data.url,
                        }
                    );
                } else {
                    this.$message.error(e.message);
                }
            },

            handleRemove(file, fileList) {
                this.uploadImg = fileList;
            },

            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        },
    }
</script>
<style scoped>
    .hintStr{
        padding-left: 10px;
        color: #FF6565;
    }
    .special-top {
        display: flex;
        align-items: center;
        height: 60px;
        padding: 0 24px;
    }

    .gray-line {
        height: 12px;
        width: 100%;
        background: #fafafa;
    }

    .special-title {
        padding: 35px 0 0 25px;
        color: #2C5586;
    }

    .row-line {
        display: flex;
        align-items: center;
        width: 800px;
        justify-content: space-between;
        padding-left: 31px;
    }


    .row-cell {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }

    .row-label {
        flex-shrink: 0;
        display: inline-block;
        width: 80px;
        text-align: right;
        margin-right: 10px;
        font-size: 14px;
    }

    .row-ipt {
        width: 240px;
    }

    .upload-cell {
        align-items: normal;
    }

    .upload-cell .row-label {
        margin-top: 20px;
    }

    .submit button{
        margin-top: 20px;
        margin-left: 20px;
    }

 

    .disable-cell {
        background-color: #fafafa;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        outline: 0;
        padding: 0 15px;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        height: 32px;
        line-height: 32px;
        font-size: 15px;
        user-select: none;
        flex-shrink: 0;
    }

    .deliver-line {
        display: inline;
        padding: 0 5px;
    }


    .max-width-300 {
        max-width: 300px;
    }

    .over-hidden {

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mr-10{
        margin-right: 10px;
    }
</style>